<template>
	<view>
		<block v-if="isload">
			<form @submit="subform">
				<view class="form-box">
					<view class="form-item flex-col" style="border-bottom:0">
						<view class="f1" style="width:100%">
							<!-- <text style="color:red;padding-right:6rpx;">*</text> -->请选择名片背景
						</view>
						<view class="f2">
							<view v-for="(item, index) in bgpic" :key="index" class="layui-imgbox">
								<view class="layui-imgbox-close" @tap="removeimg" :data-index="index"
									data-field="bgpic">
									<image style="display:block"
										src="https://lt.caomei.zone/xcxstatic/static/img/ico-del.png"></image>
								</view>
								<view class="layui-imgbox-img">
									<image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image>
								</view>
							</view>
							<view class="uploadbtn"
								:style="'background:url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 60rpx;background-size:80rpx 80rpx;background-color:#F3F3F3;'"
								@tap="uploadbgpic" data-field="bgpic" data-pernum="1" v-if="bgpic.length==0"></view>
						</view>
						<input type="text" hidden="true" name="bgpic" :value="bgpic.join(',')" maxlength="-1" />
					</view>
				</view>

				<view class="form-box">
					<view class="margin-tb-sm solids-bottom padding-bottom" @tap="uploadimg" data-field="headimg"
						data-pernum="1">
						<view class="flex justify-between">
							<text lines="1" class="text_5 margin-top-xs">头像</text>
							<view class="flex align-center">
								<view class="cu-avatar round margin-left"
									:style="'background-image:url('+headimg[0]+');'"></view>
								<text class="cuIcon-right lg"></text>
							</view>
						</view>
						<input type="text" hidden="true" name="headimg" :value="headimg.join(',')" maxlength="-1" />
					</view>

					<view class="form-item">
						<text class="text_5 margin-top-xs">姓名</text>
						<input class="text_6" placeholder="请输入" type="text" name="realname" :value="info.realname"
							placeholder-style="color:#888"></input>
					</view>

					<view class="form-item flex-col">
						<view class="f1" style="width:100%"><text
								style="color:red;padding-right:6rpx;">*</text>请添加头衔(最多添加3个)</view>
						<view class="f2">
							<input type="text" name="touxian1" :value="info.touxian1"
								placeholder="公司名称+职务，如：某科技有限公司|总经理" placeholder-style="color:#888"
								style="text-align:left"></input>
						</view>
						<view class="f2" style="margin-top:10rpx">
							<input type="text" name="touxian2" :value="info.touxian2"
								placeholder="公司名称+职务，如：某科技有限公司|总经理" placeholder-style="color:#888"
								style="text-align:left"></input>
						</view>
						<view class="f2" style="margin-top:10rpx">
							<input type="text" name="touxian3" :value="info.touxian3"
								placeholder="公司名称+职务，如：某科技有限公司|总经理" placeholder-style="color:#888"
								style="text-align:left"></input>
						</view>
					</view>


					<view class="form-item flex-col">
						<view class="f1" style="width:100%">联系信息<text
								style="font-size:24rpx;color:#888">(前三项将显示在名片封面上)</text></view>
					</view>
					<block v-for="(item,index) in field_list" v-if="item.isshow==1">
						<view class="form-item">
							<view class="f1"><text
									style="color:red;padding-right:6rpx;">{{item.required==1 ? '*' : ' '}}</text>
								<text class="text_5">{{item.name}}</text>

							</view>
							<view class="f2"><input type="text" :name="index" placeholder="请输入"
									:value="index=='address' ? address : info[index]"
									placeholder-style="color:#888"></input></view>
							<view class="f3" v-if="index=='address'" @tap="selectzuobiao"
								style="color:#58e;font-size:24rpx;margin-left:6rpx">选择位置</view>
						</view>
					</block>
					<input name="latitude" :value="latitude" hidden="true" />
					<input name="longitude" :value="longitude" hidden="true" />

					<view v-for="(Zitem,Zindex) in present" :key="Zindex">
						<view class="form-item flex-col">
							<text>{{Zitem.text}}</text>
							<view class="detailop">
								<view class="btn" @tap="detailAddtext(Zindex)">+文本</view>
								<view class="btn" @tap="detailAddpic(Zindex)">+图片</view>
								<view class="btn" @tap="detailAddvideo(Zindex)">+视频</view>
							</view>
							<view>
								<block v-for="(setData, index) in Zitem.substance" :key="index">
									<view class="detaildp">
										<view class="op">
											<view class="flex1"></view>
											<view class="btn" @tap="detailMoveup(Zindex,index)" :data-index="index">上移
											</view>
											<view class="btn" @tap="detailMovedown(Zindex,index)" :data-index="index">下移
											</view>
											<view class="btn" @tap="detailMovedel(Zindex,index)" :data-index="index">删除
											</view>
										</view>
										<view class="detailbox">
											<block v-if="setData.temp=='notice'">
												<dp-notice :params="setData.params" :data="setData.data"></dp-notice>
											</block>
											<block v-if="setData.temp=='banner'">
												<dp-banner :params="setData.params" :data="setData.data"></dp-banner>
											</block>
											<block v-if="setData.temp=='search'">
												<dp-search :params="setData.params" :data="setData.data"></dp-search>
											</block>
											<block v-if="setData.temp=='text'">
												<dp-text :params="setData.params" :data="setData.data"></dp-text>
											</block>
											<block v-if="setData.temp=='title'">
												<dp-title :params="setData.params" :data="setData.data"></dp-title>
											</block>
											<block v-if="setData.temp=='dhlist'">
												<dp-dhlist :params="setData.params" :data="setData.data"></dp-dhlist>
											</block>
											<block v-if="setData.temp=='line'">
												<dp-line :params="setData.params" :data="setData.data"></dp-line>
											</block>
											<block v-if="setData.temp=='blank'">
												<dp-blank :params="setData.params" :data="setData.data"></dp-blank>
											</block>
											<block v-if="setData.temp=='menu'">
												<dp-menu :params="setData.params" :data="setData.data"></dp-menu>
											</block>
											<block v-if="setData.temp=='map'">
												<dp-map :params="setData.params" :data="setData.data"></dp-map>
											</block>
											<block v-if="setData.temp=='cube'">
												<dp-cube :params="setData.params" :data="setData.data"></dp-cube>
											</block>
											<block v-if="setData.temp=='picture'">
												<dp-picture :params="setData.params" :data="setData.data"></dp-picture>
											</block>
											<block v-if="setData.temp=='pictures'">
												<dp-pictures :params="setData.params"
													:data="setData.data"></dp-pictures>
											</block>
											<block v-if="setData.temp=='video'">
												<dp-video :params="setData.params" :data="setData.data"></dp-video>
											</block>
											<block v-if="setData.temp=='shop'">
												<dp-shop :params="setData.params" :data="setData.data"
													:shopinfo="setData.shopinfo"></dp-shop>
											</block>
											<block v-if="setData.temp=='product'">
												<dp-product :params="setData.params" :data="setData.data"
													:menuindex="menuindex"></dp-product>
											</block>
											<block v-if="setData.temp=='collage'">
												<dp-collage :params="setData.params" :data="setData.data"></dp-collage>
											</block>
											<block v-if="setData.temp=='kanjia'">
												<dp-kanjia :params="setData.params" :data="setData.data"></dp-kanjia>
											</block>
											<block v-if="setData.temp=='seckill'">
												<dp-seckill :params="setData.params" :data="setData.data"></dp-seckill>
											</block>
											<block v-if="setData.temp=='scoreshop'">
												<dp-scoreshop :params="setData.params"
													:data="setData.data"></dp-scoreshop>
											</block>
											<block v-if="setData.temp=='coupon'">
												<dp-coupon :params="setData.params" :data="setData.data"></dp-coupon>
											</block>
											<block v-if="setData.temp=='article'">
												<dp-article :params="setData.params" :data="setData.data"></dp-article>
											</block>
											<block v-if="setData.temp=='business'">
												<dp-business :params="setData.params"
													:data="setData.data"></dp-business>
											</block>
											<block v-if="setData.temp=='liveroom'">
												<dp-liveroom :params="setData.params"
													:data="setData.data"></dp-liveroom>
											</block>
											<block v-if="setData.temp=='button'">
												<dp-button :params="setData.params" :data="setData.data"></dp-button>
											</block>
											<block v-if="setData.temp=='hotspot'">
												<dp-hotspot :params="setData.params" :data="setData.data"></dp-hotspot>
											</block>
											<block v-if="setData.temp=='cover'">
												<dp-cover :params="setData.params" :data="setData.data"></dp-cover>
											</block>
											<block v-if="setData.temp=='richtext'">
												<dp-richtext :params="setData.params" :data="setData.data"
													:content="setData.content"></dp-richtext>
											</block>
											<block v-if="setData.temp=='form'">
												<dp-form :params="setData.params" :data="setData.data"
													:content="setData.content"></dp-form>
											</block>
											<block v-if="setData.temp=='userinfo'">
												<dp-userinfo :params="setData.params" :data="setData.data"
													:content="setData.content"></dp-userinfo>
											</block>
										</view>
									</view>
								</block>
							</view>
						</view>
					</view>


					<!-- 标签 -->
					<view class="form-item flex-col">
						<view class="f1" style="width:100%">能提供的资源</view>
						<view class='padding-sm flex flex-wrap'>

							<view class="padding-xs" v-for="(item,index) in tagList1" :key="index">
								<view class='cu-tag bg-white' v-if="!item.select"
									style="padding: 0upx 20upx;margin: 10upx;border-radius: 40upx;height: 70rpx; border: 1upx solid rgba(0, 0, 0, 0.1);"
									@click="tagSelect(index)">{{item.name}}
								</view>
								<view class='cu-tag bg-purple' v-if="item.select"
									style="padding: 0upx 20upx;margin: 10upx;border-radius: 40upx;height: 70rpx;"
									@click="tagSelect(index)">{{item.name}}
								</view>
							</view>

							<robby-tags v-model="tagList2" @add="addTag" @delete="delTag" bg-color-type="purple"
								enable-del="true" enable-add="true"></robby-tags>
						</view>
					</view>

					<view class="form-item flex-col" style="border-bottom:0">
						<view class="f1" style="width:100%">自定义分享标题(不填写则按框中内容显示)</view>
						<view class="f2">
							<input type="text" name="sharetitle" :value="info.sharetitle" placeholder="您好，这是我的名片，望惠存！"
								placeholder-style="color:#888" style="text-align:left"></input>
						</view>
					</view>
				</view>
				<button class="savebtn bg-purple" form-type="submit">提交</button>
				<view style="height:50rpx"></view>
			</form>


			<view class="popup__container" v-if="bglistshow">
				<view class="popup__overlay" @tap.stop="changeGlistDialog"></view>
				<view class="popup__modal">
					<view class="popup__title">
						<text class="popup__title-text">请选择名片背景图</text>
						<image src="https://lt.caomei.zone/xcxstatic/static/img/close.png" class="popup__close"
							style="width:36rpx;height:36rpx" @tap.stop="changeBglistDialog" />
					</view>
					<view class="popup__content">
						<block v-for="(item, index) in bglist" :key="item">
							<view class="clist-item flex-y-center" @tap="bgChange" :data-pic="item">
								<view class="flex1"><img :src="item" style="width:300rpx" /></view>
								<view class="radio"
									:style="bgpic.join(',')==item ? 'background:'+t('color1')+';border:0' : ''">
									<image class="radio-img"
										src="https://lt.caomei.zone/xcxstatic/static/img/checkd.png" />
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
			
			<uni-popup id="dialogDetailtxt" ref="dialogDetailtxt" type="dialog">
				<view class="uni-popup-dialog">
					<view class="uni-dialog-title">
						<text class="uni-dialog-title-text">请输入文本内容</text>
					</view>
					<view class="uni-dialog-content">
						<textarea v-model="dtext" placeholder="请输入文本内容"></textarea>
					</view>
					<view class="uni-dialog-button-group">
						<view class="uni-dialog-button" @click="dialogDetailtxtClose">
							<text class="uni-dialog-button-text">取消</text>
						</view>
						<view class="uni-dialog-button uni-border-left" @click="dialogDetailtxtConfirm">
							<text class="uni-dialog-button-text uni-button-color">确定</text>
						</view>
					</view>
					<view class="uni-popup-dialog__close" @click="dialogDetailtxtClose">
						<span class="uni-popup-dialog__close-icon "></span>
					</view>
				</view>
			</uni-popup>
			
		</block>
		<view style="display:none">{{test}}</view>
		<loading v-if="loading"></loading>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();
	import robbyTags from '@/components/robby-tags/robby-tags.vue'

	export default {
		components: {
			robbyTags
		},
		data() {
			return {
				isload: false,
				loading: false,
				pre_url: app.globalData.pre_url,
				info: {},
				field_list: [],
				bgpic: [],
				headimg: [],
				tagList2: [], //存放标签
				tagList1: [],
				tagList0: [],
				tagList: [],
				bglist: [],
				bglistshow: false,
				address: '',
				latitude: '',
				longitude: '',
				test: '',
				present: [{
					text: '个人简介',
					substance: {}
				}, {
					text: '产品/项目介绍',
					substance: {}
				}],
				modal:0,
				dtext:'',
			};
		},

		onLoad: function(opt) {
			// this.isload=true
			this.opt = app.getopts(opt);
			this.getTagData()
			this.getdata();
		},
		methods: {
			getdata: function() {
				var that = this;
				that.loading = true;
				app.get('ApiMingpian/edit', {}, function(res) {
					that.loading = false;
					that.info = res.info || {};
					that.address = res.info.address || '';
					that.latitude = res.info.latitude || '';
					that.longitude = res.info.longitude || '';
					if (that.info['bgpic']) {
						that.bgpic = (that.info['bgpic']).split(',');
					} else {
						that.bgpic = [];
					}
					if (that.info['headimg']) {
						that.headimg = (that.info['headimg']).split(',');
					} else {
						that.headimg = [];
					}
					that.field_list = res.field_list;
					that.present[0].substance = res.pagecontent
					that.present[1].substance = res.introduce
					that.bglist = res.bglist;
					console.log('info', that.info)
					if (res.info.provide_resource != null) {
						that.tagList = res.info.provide_resource.split(',')
						console.log(that.tagList)
						for (var i = 0; i < that.tagList.length; i++) {
							var sign = false
							for (var x = 0; x < that.tagList1.length; x++) {
								if (that.tagList[i] == that.tagList1[x].name) {
									that.$set(that.tagList1[x], 'select', true)
									that.tagList0.push(that.tagList1[x].name)
									sign = true
								}
							}
							if (!sign) {
								that.tagList2.push(that.tagList[i])
							}
						}
					}
					that.loaded();
				});
			},
			getTagData() {

				app.post('ApiRenMai/prlist', {}, (res) => {
					console.log(res)
					this.tagList1 = res.data
					for (var i = 0; i < this.tagList1.length; i++) {
						this.$set(this.tagList1[i], 'select', false)
					}
				})
			},
			tagSelect(e) {
				if (this.tagList1[e].select) {
					this.$set(this.tagList1[e], 'select', false)
					this.tagList0.splice(this.tagList1[e].name, 1)
				} else {
					this.$set(this.tagList1[e], 'select', true)
					this.tagList0.push(this.tagList1[e].name)
				}
				console.log(this.tagList0)
			},
			subform: function(e) {
				this.tagList = []
				this.tagList = [...this.tagList0, ...this.tagList2]
				console.log(this.tagList)
				var that = this;
				var formdata = e.detail.value;
				var provide_resource = that.tagList.toString()
				formdata.provide_resource = provide_resource
				if (formdata.headimg == '') {
					app.alert('请上传个人照片');
					return;
				}
				if (formdata.realname == '') {
					app.alert('请输入姓名');
					return;
				}
				if (formdata.touxian1 == '' && formdata.touxian2 == '' && formdata.touxian3 == '') {
					app.alert('请填写至少一个头衔');
					return;
				}
				for (var i in that.field_list) {
					var thisfield = that.field_list[i];
					console.log(i)
					console.log(thisfield)
					if (thisfield.required == 1 && formdata[i] == '') {
						app.alert('请输入' + thisfield.name);
						return;
					}
				}
				console.log(formdata)
				console.log(that.pagecontent)
				console.log(that.present)
				app.showLoading('保存中');
				app.post('ApiMingpian/save', {
					info: formdata,
					pagecontent: that.present[0].substance,
					introduce: that.present[1].substance
					// provide_resource:provide_resource
				}, function(res) {
					if (res.status == 0) {
						app.error(res.msg);
					} else {
						app.success(res.msg);
						setTimeout(function() {
							app.goto('index', 'redirect');
						}, 1000);
					}
				});
			},
			uploadbgpic: function() {
				var that = this;
				var bglist = this.bglist;
				if (bglist.length > 0) {
					uni.showActionSheet({
						itemList: ['选择系统背景', '自己上传背景（700×480像素）'],
						success: function(res) {
							console.log(res.tapIndex)
							if (res.tapIndex == 0) {
								that.bglistshow = true;
							} else {
								that.uploadimg({
									currentTarget: {
										dataset: {
											field: "bgpic",
											pernum: "1"
										}
									}
								});
							}
						}
					});
				} else {
					that.uploadimg({
						currentTarget: {
							dataset: {
								field: "bgpic",
								pernum: "1"
							}
						}
					});
				}
			},
			bgChange: function(e) {
				var pic = e.currentTarget.dataset.pic;
				this.bgpic = [pic];
				this.bglistshow = false;
			},
			dialogDetailtxtClose: function() {
				this.$refs.dialogDetailtxt.close();
				this.dtext=''
				console.log('text',this.dtext)
			},
			dialogDetailtxtConfirm: function(e) {
				var detailtxt = this.dtext;
				console.log(detailtxt)
				var Mid = 'M' + new Date().getTime() + parseInt(Math.random() * 1000000);
				var pagecontent = this.present[this.modal].substance;
				pagecontent.push({
					"id": Mid,
					"temp": "text",
					"params": {
						"content": detailtxt,
						"showcontent": detailtxt,
						"bgcolor": "#ffffff",
						"fontsize": "14",
						"lineheight": "20",
						"letter_spacing": "0",
						"bgpic": "",
						"align": "left",
						"color": "#000",
						"margin_x": "0",
						"margin_y": "0",
						"padding_x": "5",
						"padding_y": "5",
						"quanxian": {
							"all": true
						},
						"platform": {
							"all": true
						}
					},
					"data": "",
					"other": "",
					"content": ""
				});
				console.log(this.present)
				console.log('modal', this.modal)
				console.log(this.present[this.modal])
				this.present[this.modal].substance = pagecontent;
				this.$refs.dialogDetailtxt.close();
				this.dtext=''
				console.log('text',this.dtext)
			},
			detailAddtext(e){
				this.modal=e
				console.log(this.modal)
				this.$refs.dialogDetailtxt.open();
			},
			detailAddpic: function(e) {
				var that = this;
				app.chooseImage(function(urls) {
					var Mid = 'M' + new Date().getTime() + parseInt(Math.random() * 1000000);
					var pics = [];
					for (var i in urls) {
						var picid = 'p' + new Date().getTime() + parseInt(Math.random() * 1000000);
						pics.push({
							"id": picid,
							"imgurl": urls[i],
							"hrefurl": "",
							"option": "0"
						})
					}
					var pagecontent = that.present[e].substance
					pagecontent.push({
						"id": Mid,
						"temp": "picture",
						"params": {
							"bgcolor": "#FFFFFF",
							"margin_x": "0",
							"margin_y": "0",
							"padding_x": "0",
							"padding_y": "0",
							"quanxian": {
								"all": true
							},
							"platform": {
								"all": true
							}
						},
						"data": pics,
						"other": "",
						"content": ""
					});
					that.present[e].substance = pagecontent;
				}, 9);
			},

			detailAddvideo: function(e) {
				var that = this;
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					success: function(res) {
						var tempFilePath = res.tempFilePath;
						app.showLoading('上传中');
						uni.uploadFile({
							url: app.globalData.baseurl + 'ApiImageupload/uploadImg/aid/' + app
								.globalData.aid + '/platform/' + app.globalData.platform +
								'/session_id/' + app.globalData.session_id,
							filePath: tempFilePath,
							name: 'file',
							success: function(res) {
								app.showLoading(false);
								var data = JSON.parse(res.data);
								if (data.status == 1) {
									that.video = data.url;
									var pagecontent = that.present[e].substance;
									var Mid = 'M' + new Date().getTime() + parseInt(Math
										.random() * 1000000);
									pagecontent.push({
										"id": Mid,
										"temp": "video",
										"params": {
											"bgcolor": "#FFFFFF",
											"margin_x": "0",
											"margin_y": "0",
											"padding_x": "0",
											"padding_y": "0",
											"src": data.url,
											"quanxian": {
												"all": true
											},
											"platform": {
												"all": true
											}
										},
										"data": "",
										"other": "",
										"content": ""
									});
									that.present[e].substance = pagecontent;
								} else {
									app.alert(data.msg);
								}
							},
							fail: function(res) {
								app.showLoading(false);
								app.alert(res.errMsg);
							}
						});
					},
					fail: function(res) {
						console.log(res); //alert(res.errMsg);
					}
				});
			},
			detailMoveup: function(e, index) {
				var pagecontent = this.present[e].substance;
				if (index > 0)
					pagecontent[index] = pagecontent.splice(index - 1, 1, pagecontent[index])[0];
			},
			detailMovedown: function(e, index) {
				var pagecontent = this.present[e].substance;
				if (index < pagecontent.length - 1)
					pagecontent[index] = pagecontent.splice(index + 1, 1, pagecontent[index])[0];
			},
			detailMovedel: function(e, index) {
				var pagecontent = this.present[e].substance;
				pagecontent.splice(index, 1);
			},
			changeBglistDialog: function() {
				this.bglistshow = !this.bglistshow
			},
			uploadimg: function(e) {
				var that = this;
				var pernum = parseInt(e.currentTarget.dataset.pernum);
				if (!pernum) pernum = 1;
				var field = e.currentTarget.dataset.field
				var pics = that[field]
				if (!pics) pics = [];
				app.chooseImage(function(urls) {
					for (var i = 0; i < urls.length; i++) {
						pics.push(urls[i]);
					}
					if (field == 'pic') that.pic = pics;
					if (field == 'pics') that.pics = pics;
				}, pernum);
			},
			removeimg: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index
				var field = e.currentTarget.dataset.field
				if (field == 'bgpic') {
					var bgpics = that.bgpic
					bgpics.splice(index, 1);
					that.bgpic = bgpics;
				} else if (field == 'headimg') {
					var headimg = that.headimg
					headimg.splice(index, 1);
					that.headimg = headimg;
				}
			},
			selectzuobiao: function() {
				console.log('selectzuobiao')
				var that = this;
				uni.chooseLocation({
					success: function(res) {
						console.log(res);
						that.address = res.address + res.name;
						that.latitude = res.latitude;
						that.longitude = res.longitude;
					},
					fail: function(res) {
						console.log(res)
						if (res.errMsg == 'chooseLocation:fail auth deny') {
							//$.error('获取位置失败，请在设置中开启位置信息');
							app.confirm('获取位置失败，请在设置中开启位置信息', function() {
								uni.openSetting({});
							});
						}
					}
				});
			},
			// 添加标签
			addTag(e) {
				console.log(e)
			},
			// 删除标签
			delTag(e) {
				console.log(e)
			},
		}
	};
</script>
<style>
	radio {
		transform: scale(0.6);
	}

	checkbox {
		transform: scale(0.6);
	}

	.form-box {
		padding: 2rpx 24rpx 0 24rpx;
		background: #fff;
		margin: 24rpx;
		border-radius: 30rpx
	}

	.form-item {
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
		padding-bottom: 20rpx;
	}

	.form-item .f1 {
		color: #222;
		width: 250rpx;
		flex-shrink: 0;
	}

	.form-item .f2 {
		display: flex;
		align-items: center;
		flex: 1
	}

	.form-box .form-item:last-child {
		border: none
	}

	.form-box .flex-col {
		padding-bottom: 20rpx
	}

	.form-item input {
		width: 100%;
		margin-top: 15rpx;
		overflow-wrap: break-word;
		color: rgba(181, 181, 181, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.form-item textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx 0;
		border: none;
	}

	.form-item .upload_pic {
		margin: 50rpx 0;
		background: #F3F3F3;
		width: 90rpx;
		height: 90rpx;
		text-align: center
	}

	.form-item .upload_pic image {
		width: 32rpx;
		height: 32rpx;
	}

	.savebtn {
		width: 90%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		border-radius: 48rpx;
		color: #fff;
		font-weight: bold;
		margin: 0 5%;
		margin-top: 60rpx;
		border: none;
	}

	.layui-imgbox {
		margin-right: 16rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		position: relative;
	}

	.layui-imgbox-close {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		right: -16rpx;
		top: -16rpx;
		z-index: 5;
		color: #999;
		font-size: 32rpx;
		background: #fff;
		border-radius: 50%
	}

	.layui-imgbox-close image {
		width: 100%;
		height: 100%
	}

	.layui-imgbox-img {
		display: block;
		width: 200rpx;
		height: 200rpx;
		padding: 2px;
		border: #d3d3d3 1px solid;
		background-color: #f6f6f6;
		overflow: hidden
	}

	.layui-imgbox-img>image {
		max-width: 100%;
	}

	.layui-imgbox-repeat {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		line-height: 28rpx;
		right: 2px;
		bottom: 2px;
		color: #999;
		font-size: 30rpx;
		background: #fff
	}

	.uploadbtn {
		position: relative;
		height: 200rpx;
		width: 200rpx
	}

	.clist-item {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		padding: 20rpx 30rpx;
	}

	.radio {
		flex-shrink: 0;
		width: 32rpx;
		height: 32rpx;
		background: #FFFFFF;
		border: 2rpx solid #BFBFBF;
		border-radius: 50%;
		margin-right: 30rpx
	}

	.radio .radio-img {
		width: 100%;
		height: 100%;
		display: block
	}

	.freightitem {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		margin-left: 40rpx
	}

	.freightitem .f1 {
		color: #666;
		flex: 1
	}

	.detailop {
		display: flex;
		line-height: 60rpx
	}

	.detailop .btn {
		border: 1px solid #ccc;
		margin-right: 10rpx;
		padding: 0 16rpx;
		color: #222;
		border-radius: 10rpx
	}

	.detaildp {
		position: relative;
		line-height: 50rpx
	}

	.detaildp .op {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		font-size: 24rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 10rpx
	}

	.detaildp .op .btn {
		background: rgba(0, 0, 0, 0.4);
		margin-right: 10rpx;
		padding: 0 10rpx;
		color: #fff
	}

	.detaildp .detailbox {
		border: 2px dashed #00a0e9
	}

	.uni-popup-dialog {
		width: 300px;
		border-radius: 5px;
		background-color: #fff;
	}

	.uni-dialog-title {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-top: 15px;
		padding-bottom: 5px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.uni-dialog-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 5px 15px 15px 15px;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6e6e6e;
	}

	.uni-dialog-button-group {
		display: flex;
		flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		display: flex;
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	.uni-dialog-button-text {
		font-size: 14px;
	}

	.uni-button-color {
		color: #007aff;
	}

	.text_5 {
		overflow-wrap: break-word;
		color: rgba(142, 142, 142, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
	}
</style>